<template>
    <div class="about-page" v-loading="loading">
        <h3 class="news-title">{{content.title}}</h3>
        <div class="about-content" v-html="content.content"></div>
    </div>
</template>

<script>

import Cookies from 'js-cookie'
export default {


    data(){
        return{
            total:null,
            input:'',
            loading:false,
            content:{},
            html:'',
            url:'',
            id:'',
        }
    },
    created(){
        this.id = this.$route.params.id;
        this.url = Cookies.get('url');
        this.getData();
    },
    mounted(){

    },
    watch:{
        // 利用watch方法检测路由变化：
    　　'$route': function (to, from) {
            console.log(3333,to.path);
    　　　　//拿到目标参数 to.query.id 去再次请求数据接口
            let path = to.path;
            let arr = path.split("/");
            console.log(arr,222)
            if(arr[1]=='news_content' && arr[1]!='index'){
              this.id = this.$route.params.id
              this.url = Cookies.get('url');
              if(this.id!=undefined){
                  this.getData();
              }
            }
            // let path = to.path;
            // let arr = path.split("/");
            // console.log(arr,222)
            // if(arr[1]=='news_content'){
            //   this.kechengid = this.$route.params.id
            //   if(this.kechengid!=undefined){

            //       this.getData();
            //   }
            // }
           }
      },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        goPage(){

        },
        getData(){
            let that = this;
            this.loading = true;

            this.$axios.$get(this.url+'?id='+this.id)
            .then(function (response) {
                that.content = response.data;
                that.content.content = that.content.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'")
                that.loading = false;
                console.log(that.content,3333)

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })

        },
        goContent(){

        },
        pageChange(index){

        }
    }
}
</script>

<style lang="less" scoped="scoped">
    .about-page{
        min-height:500px;
        .news-title{
            width:1250px;

            margin:0 auto;
            line-height:40px;
            text-align:center;
            font-size:22px;
            color:#444444;
            margin-top:30px;;
        }
        .about-content{
            width:1250px;
            margin:0 auto;
            margin-top:30px;
            font-size:16px;
            img{
                max-width:100%;
            }
            margin-bottom:50px;
        }
    }


</style>
